<template>
    <div class="preview-box" :class="[align]">
        <el-image @show="handleShow" ref="imgRef" class="reset" crossorigin="anonymous" :src="imageUrl" :preview-src-list="srcList" fit="cover" :preview-teleported="true" :z-index="10000000"/>
        <el-link class="reset-text" type="primary" :underline="false" @click="handleShow">{{ text }}</el-link>
    </div>
    <!-- <Teleport to="body">
        <div v-if="showBigImg" class="shadow-box">
            <div class="close pointer" @click="closeShow">
                <el-icon>
                    <CloseBold />
                </el-icon>
            </div>
            <div class="img-box">
                <el-image crossorigin="anonymous" :src="imageUrl" fit="cover" />
            </div>
        </div>
    </Teleport> -->
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
const showBigImg = ref(false)
const imgRef = ref(null)
const props = defineProps({
    text: {
        type: String,
        default: '点击查看'
    },
    imageUrl: {
        type: String
    },
    align: {
        type: String,
        default: 'left'
    }
})

const srcList = computed(() => {
    return Array.isArray(props.imageUrl) ? props.imageUrl : [props.imageUrl]
})

const handleShow = () => {
    setTimeout(() => {
        console.log(1111)
        const imgs = document.querySelectorAll('.el-image-viewer__img')
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].setAttribute('crossorigin', 'anonymous')
        }
        console.log(222, imgs)
    }, 0)

    // showBigImg.value = true
    // console.log(111, imgRef.value.show());
}

const closeShow = () => {
    showBigImg.value = false
}
</script>
<style lang="scss" scoped>
.preview-box {
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    position: relative;
}
.reset {
    opacity: 0;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}
:deep(.reset .el-image__preview) {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.reset-text {
    position: absolute;
}
.center {
    .reset {
        left: 0;
        top: 0;
    }
    .reset-text {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
}
// .shadow-box {
//     position: fixed;
//     left: 0;
//     top: 0;
//     width: 100vw;
//     height: 100vh;
//     background: rgba(0, 0, 0, 0.5);
//     z-index: 10086;
// }

// .close {
//     position: absolute;
//     right: 20px;
//     top: 20px;
//     font-size: 40px;
//     color: #fff;
// }

// .img-box {
//     position: absolute;
//     left: 50%;
//     top: 50%;
//     transform: translate(-50%, -50%);
//     width: auto;
//     max-height: 70vw;
// }
</style>
